<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Magic - KeyBoard</title>
	<link rel="stylesheet" href="css/wap_reset2017.css">
	<link rel="stylesheet" href="font/iconfont.css">
	<script src="js/flexible.js"></script>
<style>
	/*demo*/
	.btn-keyboard {padding: 0 0.2rem;border-radius: 0.06rem;border:1px solid #ddd;height:1rem;line-height:1rem;background:#fff;}
	.demoInput {padding: 0 0.2rem;border-radius: 0.06rem;border:1px solid #ddd;height:1rem;line-height:1rem;background:#fff;}
	.box {position: fixed;width: 100%;height: 100%;top:0;left:0;background: rgba(0,0,0,.6);z-index: 1000;display: none;}
	.box_con {background:#fff;width:80%;padding:0.6rem 0.4rem;position: fixed;top:35%;left:10%;border-radius:0.06rem;}
	.pop {background: #080;font-size: 0.28rem;text-align: center;padding:0.2rem;color: #fff;border-radius:3px;}
/*Button*/
.magic-btn {
	display: inline-block;
	height: 0.7rem;
	line-height: 0.7rem;
	font-size: 0.28rem;
	padding: 0 0.2rem;
	border-radius: 0.06rem;
	border: none;
	text-align: center;
}	
</style>
</head>
<body>
	<section class="flexview">
		<header class="m-header gray3">
			<div class="header-left">
				<a href="javascript:history.go(-1)" class="gray3 goback"><i class="iconfont icon-zuo"></i></a>
			</div>
    		<div class="header-center p03r"><span class="header-title">KeyBoard</span></div>	
    		<div class="header-right">
    			<a href="index.html" class="home"><i class="iconfont icon-moreandroid"></i></a>
    		</div>	
		</header>
		<div class="g-scrollview">
			<div class="f28 gray9 p04r">
				调用方法：<br>
				$(触发输入区).telkeyboard();<br>
				可选参数：mask:false (默认true), zindex: (默认1000)	<br>
				Input结构在某些系统下禁止不了光标，使用htm结构处理。<br>
				基于zepto，rem适配，请使用fastclick优化click事件，样式文件telkeyboard.1.3.css，回退按钮使用字体文件
			</div>
			<div class="plr04r mt04r">
				<div class="btn-keyboard f26">请输入手机号码</div>
				<div class="btn-keyboard f26 mt04r">请输入手机号码</div>
				<a type="submit" class="mt06r pop" id="J_Confirm">弹层中调用软键盘</a>
			</div>
		</div>
	</section>
	
<!--demo 弹层中调用软键盘-->
<div class="box">
	<div class="box_con">
		<div class="demoInput f28">请输入手机号码</div>
		<input type="submit" class="magic-btn magic-btn-danger magic-btn-block mt03r" value="提交" />
		<a href="javascript:;" class="magic-btn magic-btn-default magic-btn-block mt03r close">关闭</a>
	</div>
</div>	
	
<script src="js/zepto.min.js"></script>
<script src="js/telkeyboard.1.3.js"></script>
<script>
$(function(){
	//软键盘输入
	$('.btn-keyboard').telkeyboard();
	
	//demo
	$('.pop').on('click',function(){
		$('.box').show();
	})
	$('.demoInput').telkeyboard({
		mask:false,
		zindex:'1500'
	})
	$('.box .close').click(function(){
		$('.box').hide();
	})
});
</script>


</body>
</html>